{% stylesheet %}
    .block_collection{
        background: #f5f5f5;
        padding: 50px 0;
    }
    .block_collection ul{
        justify-content: center;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .block_collection ul li{
        background: #fff;
        box-shadow: 0 4px 4px rgb(0 0 0 / 2%);
        width: calc(20% - 24px);
        margin-right: 30px;
        margin-bottom: 30px;
    }
    .block_collection ul li:nth-child(5n){
        margin-right:0;
    }
    .block_collection .block_collection_name{
        padding: 20px 10px;
        text-align: center;
        
    }
    .block_collection .block_collection_name a{
        display: block;
        font-weight: var(--title_font_weigth);
        font-size: 16px;
    }
    .block_collection .block_collection_name span{
        display: block;

    }
    .block_collection .block_collection_pic{
        display: block;
    }
    .block_collection .block_collection_pic img{
        width: 100%;
        object-fit: cover;
    }
    .block_collection .block_collection_more{
        text-align: center;
    }
    @media (max-width: 767px){
        .block_collection ul li{
            width: calc(50% - 7.5px);
            margin-right: 15px;
            margin-bottom: 15px;
        }
        .block_collection ul li:nth-child(5n){
            margin-right:15px;
        }
        .block_collection ul li:nth-child(2n){
            margin-right:0;
        }
        
    }
{% endstylesheet %}
<div class="block_collection" id="block_collection_{{ block.id }}"> 
    <div class="container_wrapper">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}

        <div class="block_collection_items">
            <ul>
                {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}
                {% if section.blocks.size %}
                {% get_collections ids = {collection_ids} limit=100 %}

                {% for block in section.blocks %}
                {% assign id = block.collection.id %}
                {% if collections[id].size > 1 %}
                {% assign collection = collections[id] %}
                
                
                <li>
                    <div class="block_collection_content">
                        <a class="block_collection_pic" href="/collections/{{ collection.handle }}">
                            <img data-src="{{collection.src}}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ collection.title }}">
                        </a>
                        <div class="block_collection_name">
                            <a href="/collections/{{ collection.handle }}">{{ collection.title }}</a>
                            <span>{{ collection.product_count }} {{ lang.collections.detail.products }}</span>
                        </div>
                    </a>
                </li>

                {% else %}

                <li>
                    <div class="block_collection_content">
                        <a href="javascript:;" data-tips="请选择专辑" class="block_collection_pic">
                            <img src="{{ 'empty.png' | public_asset_abs_url }}">
                        </a>
                        <div class="block_collection_name">
                            <a href="javascript:;" data-tips="请选择专辑">Collection Title</a>
                            <span>0 Products</span>
                        </div>
                    </a>
                </li>
                {% endif %}
                
                {% endfor %}

                {% else %}
                {% for i in (1..5) %}
                  <li>
                    <a href="javascript:;" data-tips="请选择专辑" class="block_collection_content">
                        <div class="block_collection_pic"><img src="{{ 'empty.png' | public_asset_abs_url }}"></div>
                        <div class="block_collection_name">Example Collection Title</div>
                    </a>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            {% if section.settings.more_text !='' %}
            <div class="block_collection_more"><a class="secondary_btn" href="/collections">{{ section.settings.more_text }}</a></div>
            {% endif %}
        </div>
    </div>
</div>


{% schema %}
{
    "tag": "section",
    "class": "block_collection",
    "is_global": false,
    "name": {
        "zh_CN": "专辑列表"
    },
    "max_blocks": "20",
    "settings": [
    {
        "type": "card_header",
        "label": {
                "zh_CN": "设置"
        }
    },
    {
        "type": "card_input",
        "id": "title",
        "label": {
            "zh_CN": "标题"
        },
        "placeholder": {
            "zh_CN": "请输入标题"
        }
    },
    {
        "type": "card_text_editor",
        "id": "detail",
        "label": {
            "zh_CN": "简短描述"
        },
        "placeholder": {
            "zh_CN": "请输入描述"
        }
    },
    {
        "type": "card_input",
        "id": "more_text",
        "label": {
            "zh_CN": "查看更多文案"
        }
    }
    ],
    "blocks": [
    {
        "name": {
            "zh_CN": "选择专辑"
        },
        "type": "collection-item",
        "settings": [
        {
            "type": "card_collection",
            "label": {
                "zh_CN": "专辑"
            },
            "default":{
                "id": "",
                "title": ""
            },
            "id": "collection"
        }
        ]
    }
    ],
    "default": {
        "settings": {
            "title": "Collection List",
            "detail": "",
            "more_text": ""
    },
    "blocks": [
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        },
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        },
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        },
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        },
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        }
        ]
    }
}
{% endschema %}